<script lang="ts" setup>
import { computed } from "@vue/reactivity";
import { ref } from "vue";

const props = defineProps<{ rows?: number; content: string }>();

const contentDivRef = ref();
const animateStyle = ref();

const containerStyle = computed<any>(function () {
  if (props.rows) {
    return {
      overflow: "hidden",
      textOverflow: "ellipsis",
      display: "-webkit-box",
      "-webkit-box-orient": "vertical",
      "-webkit-line-clamp": props.rows,
      height: "auto",
    };
  }
  return undefined;
});

function handleMouseenter() {
  if (contentDivRef.value) {
    const contentDiv = contentDivRef.value;
    const contentHeight = parseInt(getComputedStyle(contentDiv).height);
    const parentHeight = parseInt(
      getComputedStyle(contentDiv.parentElement!).height
    );
    if (contentHeight > parentHeight) {
      const duration = (contentHeight - parentHeight) / 36;
      animateStyle.value = {
        transform: `translateY(calc(${parentHeight}px - 100%))`,
        transition: `transform ${duration}s linear`,
      };
    } else {
      animateStyle.value = undefined;
    }
  } else {
    animateStyle.value = undefined;
  }
}

function handlemouseleave() {
  animateStyle.value = undefined;
}
</script>

<template>
  <div
    class="hover-up"
    @mouseenter="handleMouseenter"
    @mouseleave="handlemouseleave"
  >
    <div
      class="hover-content"
      ref="contentDivRef"
      :style="[animateStyle, containerStyle]"
    >
      {{ content }}
    </div>
  </div>
</template>

<style scoped>
.hover-up {
  width: 300px;
  height: 200px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 10px;
}
</style>
